<template>
	<el-menu  router unique-opened :default-active="navSelected" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
		background-color="#0C1329" text-color="rgb(255,255,255,0.38)" active-text-color="rgb(255,255,255,0.87)">
		<!-- 根据路由结构生成侧面栏导航结构 -->
		<!-- <template v-for="item in routerRoutes" >
			<el-submenu v-if="item.meta.subMenu" :index="item.path">
				<template slot="title">
					<i :class="item.meta.icon"></i>
					<span>{{item.name}}</span>
				</template>
				<el-menu-item v-for="subItem in item.children" :index="item.path + '/' + subItem.path" :key="subItem.name">
					{{subItem.name}} 
				</el-menu-item>
			</el-submenu>
			<el-menu-item v-else :index="item.path">
				<i :class="item.meta.icon"></i>
				<span slot="title">{{item.name}}</span>
				<el-menu-item v-for="subItem in item.children" :index="item.path + '/' + subItem.path" :key="subItem.name">
					{{subItem.name}}
				</el-menu-item>
			</el-menu-item>
		</template> -->
		<subMenu v-for="el in routerRoutes" :key="el.name" :item="el" :parentPath="''"/>
	</el-menu>
</template>

<script>
	import subMenu from '@/components/SubMenu'
	
	export default {
		name: 'sideNav',
		components: {
			subMenu
		},
		data () {
			return {
				navSelected: '/HealthManage/item1',
				routerRoutes: []
			}
		},
		methods: {
			initNav() {
				
			},
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
			test() {
				console.log("test");
			}
		},
		watch: {
			// 路由改变时要同时改变侧面栏高亮元素
			$route(to, from) {
				console.log(to.path);
				this.navSelected = to.path;
				console.log(this.routerRoutes);
			}
		},
		created() {
			this.routerRoutes = this.$router.options.routes;
		}
	}
</script>

<style>
	#app .el-menu {
		border-right: 0px;
	}

	.el-menu .el-menu-item.is-active {
		background: linear-gradient(to right, rgba(24, 124, 255, 0.05) 0%, rgba(24, 124, 255, 0.48) 98%, rgba(24, 124, 255, 1)98%, rgba(24, 124, 255, 1)100%);
	}
	
	[role=menuitem] {
		width: 200px;
		text-align: left;
	}
</style>
